<template>
  <div class="combo-cotainer">
    <!-- 下拉菜单组件 -->
    <div class="combo">
      <div class="combo-item" @click="showMoreCity">
        <div class="combo-item-title">
          <span v-show="flag3">{{this.currentCity}}</span>
          <span v-show="flag4" :class="{activecolor:local=='全城'?false:true}">{{this.local}}</span>
        </div>
        <span class="mui-icon mui-icon-arrowdown"></span>
      </div>
      <div class="combo-item" @click="showMoreService">
        <div class="combo-item-title">
          <span v-show="flag5">全部</span>
          <span v-show="flag6" :class="{activecolor:services=='全部'?false:true}">{{this.services}}</span>
        </div>
        <span class="mui-icon mui-icon-arrowdown"></span>
      </div>
      <div class="combo-item" @click="showMoreChoose">
        <div class="combo-item-title">
          <span :class="{activecolor:value=='距离优先'?false:true}">{{value}}</span>
        </div>
        <span class="mui-icon mui-icon-arrowdown"></span>
      </div>
    </div>

    <transition
      @beforeEnter="beforeEnter"
      @enter="enter"
      @afterEnter="afterEnter"
      @beforeLeave="beforeLeave"
      @leave="leave"
      @afterLeave="afterLeave"
    >
      <div class="combo-showmore" v-show="flag" ref="comboinfo">
        <div class="combo-showmore-header">
          <div>
            <span class="title">当前:</span>
            <span class="title">{{this.currentCity}}</span>
          </div>
          <router-link to="/store/location">
            <span @click="clearCurrentCity">切换城市</span>
          </router-link>
        </div>
        <div class="combo-showmore-content">
          <div
            class="combo-showmore-content-button"
            @click="handleCityClick(key)"
            v-for="(item,key) in district"
            :key="key"
          >
            <button type="button" :class="{active:local === key ? true : false}">{{key}}</button>
          </div>

          <!-- <button type="button">昌平区</button>
        <button type="button">昌平区</button>
        <button type="button">昌平区</button>
          <button type="button">燕郊开发区</button>-->
        </div>
      </div>
    </transition>
    <transition
      @beforeEnter="beforeEnter"
      @enter="enter"
      @afterEnter="afterEnter"
      @beforeLeave="beforeLeave"
      @leave="leave"
      @afterLeave="afterLeave"
    >
      <div class="combo-showmore" v-show="flag1" ref="comboinfo">
        <div class="combo-showmore-content">
          <div
            class="combo-showmore-content-button"
            v-for="(item,key) in service"
            :key="key"
            @click="handleServiceClick(key)"
          >
            <button type="button" :class="{active:services === key ? true : false}">{{key}}</button>
          </div>
        </div>
      </div>
    </transition>
    <transition
      @beforeEnter="beforeEnter"
      @enter="enter"
      @afterEnter="afterEnter"
      @beforeLeave="beforeLeave"
      @leave="leave"
      @afterLeave="afterLeave"
    >
      <div class="combo-showmore" v-show="flag2" ref="comboinfo">
        <div class="combo-showmore-choose" @click="handleChooseClick">
          <mt-radio align="right" v-model="value" :options="options"></mt-radio>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import "../../lib/mui/css/mui.min.css";
//导入vuex
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      flag: false,
      flag1: false,
      flag2: false,
      flag3: true,
      flag4: false,
      flag5: true,
      flag6: false,
      value: "距离优先",
      options: [
        {
          label: "距离优先",
          value: "距离优先"
        },
        {
          label: "好评最多",
          value: "好评最多"
        },
        {
          label: "销量最多",
          value: "销量最多"
        }
      ],
      local: "全城",
      services: "全部",
      district: [],
      service: []
    };
  },
  activated() {
    this.getDistrict();
    this.getService();
  },
  mounted() {},
  computed: {
    ...mapState({
      currentCity: "city"
    })
  },
  methods: {
    showMoreCity() {
      if (this.flag1) {
        this.flag1 = !this.flag1;
      } else if (this.flag2) {
        this.flag2 = !this.flag2;
      }
      this.flag = !this.flag;
    },
    showMoreService() {
      if (this.flag) {
        this.flag = !this.flag;
      } else if (this.flag2) {
        this.flag2 = !this.flag2;
      }
      this.flag1 = !this.flag1;
    },
    showMoreChoose() {
      if (this.flag1) {
        this.flag1 = !this.flag1;
      } else if (this.flag) {
        this.flag = !this.flag;
      }
      this.flag2 = !this.flag2;
    },
    beforeEnter(el) {
      el.style.bottom = "0";
      el.style.transform = "translate(0,0)";
    },
    enter(el, done) {
      el.offsetWidth;
      el.style.bottom = "-300px";
      el.style.transition = "all 0.5s ease";

      //done();
    },
    afterEnter(el) {
      //this.flag = this.flag;
    },
    beforeLeave(el) {
      el.style.bottom = "-300px";
      el.style.transform = "translate(0,0)";
    },
    leave(el, done) {
      el.offsetWidth;
      el.style.bottom = "0";
      el.style.transition = "all 1.5s ease";
      //done();
    },
    afterLeave() {
      //this.flag = this.flag;
    },
    handleCityClick(city) {
      this.flag = false;
      this.flag3 = false;
      this.flag4 = true;
      this.local = city;
      this.$emit("change", this.local);
    },
    handleServiceClick(service) {
      this.flag1 = false;
      this.flag5 = false;
      this.flag6 = true;
      this.services = service;
      this.$emit("getservice", this.services);
    },
    handleChooseClick() {
      this.flag2 = false;
    },
    getDistrict() {
      this.$http.get("/city.php").then(result => {
        //console.log(result);
        if (result.body.status === 0) {
          var key = this.currentCity;
          //console.log(key);
          this.district = result.body.district[key];
          //console.log(this.district);
        }
      });
    },
    getService() {
      this.$http.get("/city.php").then(result => {
        if (result.body.status === 0) {
          this.service = result.body.service;
          //console.log(this.service);
        }
      });
    },
    clearCurrentCity() {
      //this.$store.commit("clearCurrentCity");
    }
  },
  watch: {
    "$route.path": function(newVal) {
      if (newVal !== "/store") {
        this.flag = this.flag1 = this.flag2 = false;
        this.flag3 = true;
        this.flag4 = false;
        this.flag5 = true;
        this.flag6 = false;
        this.local = "全城";
        this.services = "全部";
        this.$emit("change", "全城");
        this.$emit("getservice", "全部");
      }
    },
    currentCity() {
      if (this.currentCity) {
        this.flag3 = true;
        this.flag4 = false;
        this.flag5 = true;
        this.flag6 = false;
        this.$emit("change", "全城");
        this.$emit("getservice", "全部");
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.combo-cotainer {
  .combo {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 45px;
    background-color: #fff;
    position: relative;
    z-index: 1;
    //top: 45px;
    margin-bottom: 16px;
    .combo-item {
      display: flex;
      align-items: center;
      margin: 0 24px;
      .combo-item-title {
        width: 56px;
        font-size: 14px;
        line-height: 14px;
        text-align: center;
      }
      .activecolor {
        color: #a1171b;
      }
      .mui-icon-arrowdown {
        font-size: 7px;
      }
    }
    .mui-icon {
      margin-left: 4px;
    }
  }
  .combo-showmore {
    background-color: #fff;
    border-top: 1px solid #ccc;
    padding: 20px 20px 10px 20px;
    position: absolute;
    //display:flex;
    width: 100%;
    //top: 45px;
    //transform: translateY(-123px);
    .combo-showmore-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
      span {
        font-size: 14px;
      }
      .title {
        font-weight: bold;
      }
    }
    .combo-showmore-content {
      display: flex;
      flex-wrap: wrap;
      .combo-showmore-content-button {
        width: 33.3%;
        text-align: center;
        margin-bottom: 10px;
        button {
          width: 90%;
          height: 40px;
          color: #333333;
        }
        .active {
          border-color: #a1171b;
        }
      }
    }
    .combo-showmore-choose {
      .mui-table-view-cell {
        .mui-navigate-right {
          font-size: 14px;
        }
      }
    }
  }
  // .my-enter,
  // .my-leave-to {
  //   transform: translateY(-168px);
  // }
  // .my-enter-active,
  // .my-leave-active {
  //   transition: all 0.5s ease;
  // }
}
</style>